<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优购商城 - 正品低价、全球配送、畅享网购乐趣！</title>
    <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/> 
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<body>
    <!-- 顶部快捷导航栏 -- start -->
    <div class="shortcut">
        <!-- 版心div -->
        <div class="w">
            <!-- 左侧登陆注册 -->
            <div class="fl">
                优购商城欢迎您！
                <a href="#">登录</a> 
                <a href="#">免费注册</a>
            </div>

            <!-- 右侧分类链接 -->
            <div class="fr">
                <a href="#">我的订单</a>
                <span>|</span>
                <a href="#">我的优购</a>
                <span>|</span>
                <a href="#">会员</a>
                <span>|</span>
                <a href="#">企业采购</a>
                <span>|</span>
                <a href="#">客户服务</a>
                <span>|</span>
                <a href="#">网站导航</a>
            </div>
        </div>
    </div>
    <!-- 顶部快捷导航栏 -- end -->

    <div class="h">
        <!-- Logo\搜索\购物车模块 -- start -->
        <div class="header w">
            <!-- Logo区 -->
            <h1 class="logo">
                <a href="#" title="优购商城">优购商城</a>
            </h1>

            <!-- 搜索区 -->
            <div class="search">
                <input type="text" placeholder="农药皮肤大出血">
                <button><span class="iconfont icon-fangdajing"></span></button>
            </div>

            <!-- 热门关键词 -->
            <div class="hotwords">
                <a href="#" class="current">新款连衣裙</a>
                <a href="#">四件套</a>
                <a href="#">潮流T恤</a>
                <a href="#">时尚女鞋</a>
                <a href="#">短裤</a>
                <a href="#">半身裙</a>
                <a href="#">男士外套</a>
                <a href="#">墙纸</a>
            </div>

            <!-- 购物车 -->
            <div class="cart">
                <i class="iconfont icon-qicheqianlian-select-copy"></i>
                我的购物车
                <i class="count">18</i>
            </div>
        </div>
        <!-- Logo\搜索\购物车模块 -- end -->

        <!-- Nav导航栏 -- start -->
        <div class="nav">
            <!-- 版心-->
            <div class="w">
                <!-- 左侧商品分类 -->
                <div class="dropdown fl">
                    <div class="dt">全部商品分类</div>
                    <div class="dd">
                        <ul>
                            <li class="item">
                                <a href="http://www.baidu.com">家用电器 / 大家电</a>
                                <span class="iconfont icon-chevron-right-single"></span>
                            </li>
                            <li class="item"><a href="#">手机 / 数码 / 通信</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">电脑 / 办公</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">家居 / 家具 / 家装 / 厨具</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">男装 / 女装 / 童装 / 内衣</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">个户化妆 / 清洁用品 / 宠物</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">鞋靴 / 箱包 / 珠宝 / 奢侈品</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">运动户外 / 钟表</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">汽车 / 汽车用品</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">母婴 / 玩具乐器</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">食品 / 酒类 / 生鲜 / 特产</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">医药保健</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">图书 /音像 / 电子书</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">彩票 / 旅行 / 充值/票务</a><span class="iconfont icon-chevron-right-single"></li>
                            <li class="item"><a href="#">理财 / 众筹 / 白条 / 保险</a><span class="iconfont icon-chevron-right-single"></li>
                        </ul>
                    </div>
                </div>
                <!-- 右侧导航栏 -->
                <div class="navitems fl">
                    <a href="#">潮服饰</a>
                    <a href="#">美妆馆</a>
                    <a href="#">电玩街</a>
                    <a href="#">电器城</a>
                    <a href="#">家世界</a>
                    <a href="#">母婴区</a>
                    <a href="#">会员专享</a>
                </div>
            </div>
        </div>
        <!-- Nav导航栏 -- end -->
    </div>

    <!-- 首页主体部分 -- start -->

    <!-- 轮播图 -->
    <div class="w">
        <!-- 轮播图盒子 -->
        <div class="swiper">
            <a class="img-list"></a>

            <!-- 圆圈列表 -->
            <ul class="slider-circle">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

            <!-- 左右切换箭头 -->
            <div class="arrow">
                <span class="iconfont icon-right l-arrow"></span>
                <span class="iconfont icon-chevron-right-single r-arrow"></span>
            </div>
        </div>
        
    </div>

    <!-- 今日推荐 --start -->
    <div class="recommend w">
        <!-- 左侧图标 -->
        <div class="recommend-icon">
            <span class="iconfont icon-shizhong"></span>
            <h3>今日推荐</h3>
        </div>

        <!-- 右侧推荐商品 -->
        <ul class="recommend-goods">
            <li>
                <a href="#"><img src="./upload/recommend/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./upload/recommend/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./upload/recommend/3.jpeg" alt=""></a>
            </li>
        </ul>
    </div>
    <!-- 今日推荐 -- end -->

    <!-- 秒杀 -- start -->
    <div class="miaosha w">
        <!-- 标题和按钮 -->
        <div>
            <h3 class="title-h3">优购秒杀</h3>
            <div class="ms-arrow">
                <span class="iconfont icon-right"></span>
                <span class="iconfont icon-chevron-right-single"></span>
            </div>
        </div>
        <!-- 秒杀商品 -->
        <div class="miaosha-main">
            <!-- 秒杀计时 -->
            <div class="countdown">
                <h3>优购秒杀</h3>
                <p><span>18:00</span>点场 倒计时</p>
                <div class="timer">
                    <div id="hour">17</div>
                    <span>:</span>
                    <div id="min">25</div>
                    <span>:</span>
                    <div id="sec">58</div>
                </div>
            </div>

            <!-- 秒杀商品 -->
            <div class="miaosha-goods">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/1.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/2.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/3.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/4.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/5.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/6.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/7.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/8.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/9.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/10.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/1.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/2.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/3.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/4.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/ms/5.webp" alt="">
                            <h4>华为mate50pro 旗舰手机 成功人士首选</h4>
                            <p>
                                <span>￥7600 </span> 
                                <span>￥7800</span>
                            </p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 秒杀 -- end -->

    <!-- 美丽人生 -->
    <div class="life w floor">
        <!-- 标题和选项卡 -->
        <div class="title">
            <h3 class="title-h3 fl">美丽人生 FASHION & BEAUTY</h3>
            <div class="cat-list">
                <a href="#">彩妆</a>
                <span>|</span>
                <a href="#">眼霜</a>
                <span>|</span>
                <a href="#">口红</a>
                <span>|</span>
                <a href="#">粉饼</a>
                <span>|</span>
                <a href="#">滋养</a>
            </div>
        </div>
        <!-- 化妆品列表 -->
        <div class="cosmetics">
            <!-- 左侧大图 -->
            <div class="logo-pic fl">
                <a href="#">
                    <img src="./upload/cosmetics/1.png" alt="">
                </a>
            </div>
            <!-- 右侧列表 -->
            <div class="cosmetics-list fr">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/2.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/3.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/4.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/5.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/6.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/7.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/8.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/9.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 家居生活 -->
    <div class="life w floor">
        <!-- 标题和选项卡 -->
        <div class="title">
            <h3 class="title-h3 fl">居家生活GROCERY & HEALTH</h3>
            <div class="cat-list">
                <a href="#">彩妆</a>
                <span>|</span>
                <a href="#">眼霜</a>
                <span>|</span>
                <a href="#">口红</a>
                <span>|</span>
                <a href="#">粉饼</a>
                <span>|</span>
                <a href="#">滋养</a>
            </div>
        </div>
        <!-- 化妆品列表 -->
        <div class="cosmetics">
            <!-- 左侧大图 -->
            <div class="logo-pic fl">
                <a href="#">
                    <img src="./upload/cosmetics/1.png" alt="">
                </a>
            </div>
            <!-- 右侧列表 -->
            <div class="cosmetics-list fr">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/2.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/3.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/4.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/5.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/6.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/7.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/8.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/9.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="life w floor">
        <!-- 标题和选项卡 -->
        <div class="title">
            <h3 class="title-h3 fl">时尚服装 GROCERY & HEALTH</h3>
            <div class="cat-list">
                <a href="#">彩妆</a>
                <span>|</span>
                <a href="#">眼霜</a>
                <span>|</span>
                <a href="#">口红</a>
                <span>|</span>
                <a href="#">粉饼</a>
                <span>|</span>
                <a href="#">滋养</a>
            </div>
        </div>
        <!-- 化妆品列表 -->
        <div class="cosmetics">
            <!-- 左侧大图 -->
            <div class="logo-pic fl">
                <a href="#">
                    <img src="./upload/cosmetics/1.png" alt="">
                </a>
            </div>
            <!-- 右侧列表 -->
            <div class="cosmetics-list fr">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/2.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/3.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/4.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/5.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/6.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/7.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/8.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/9.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="life w floor">
        <!-- 标题和选项卡 -->
        <div class="title">
            <h3 class="title-h3 fl">科技生活 GROCERY & HEALTH</h3>
            <div class="cat-list">
                <a href="#">彩妆</a>
                <span>|</span>
                <a href="#">眼霜</a>
                <span>|</span>
                <a href="#">口红</a>
                <span>|</span>
                <a href="#">粉饼</a>
                <span>|</span>
                <a href="#">滋养</a>
            </div>
        </div>
        <!-- 化妆品列表 -->
        <div class="cosmetics">
            <!-- 左侧大图 -->
            <div class="logo-pic fl">
                <a href="#">
                    <img src="./upload/cosmetics/1.png" alt="">
                </a>
            </div>
            <!-- 右侧列表 -->
            <div class="cosmetics-list fr">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/2.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/3.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/4.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/5.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/6.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/7.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/8.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/cosmetics/9.jpg" alt="">
                            <h4>乔丹男鞋春季皮面跑步鞋2021新款休闲旅游鞋子网面透气运动鞋男冬</h4>
                            <p>￥780</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 首页主体部分 -- end -->

    <!-- 脚部区域 -- start -->
    <div class="footer">
        <div class="w">
            <!-- 上方服务 -->
            <div class="footer-service">
                <ul>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-banshou"></span>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-tian"></span>
                            7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-tianbaotui"></span>
                            15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-liwu"></span>
                            满99元包邮
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-weizhi"></span>
                            680家售后网点
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 中间帮助 -->
            <div class="footer-help">
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
			 		<dd> <a href="#">购物流程 </a></dd>
			 		<dd> <a href="#">会员介绍 </a></dd>
			 		<dd> <a href="#">生活旅行 </a></dd>
			 		<dd> <a href="#">常见问题 </a></dd>
			 		<dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd><a href="#">售后服务</a></dd>
                    <dd><a href="#">自助服务</a></dd>
                    <dd><a href="#">礼券码</a></dd>
                    <dd><a href="#">团购服务</a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="#">微信支付</a></dd>
                    <dd><a href="#">支付宝支付</a></dd>
                    <dd><a href="#">银联卡支付</a></dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd><a href="#">新浪微博</a></dd>
                    <dd><a href="#">微信公众号</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                    <dd><a href="#">加入我们</a></dd>
                </dl>
                <div  class="app-download">
                    <h3>帮助中心</h3>
                    <div>
                        <img src="./img/erweima.png" alt="">
                        <p>App下载</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 下方版权 -->
        <div class="footer-copyright">
                <p class="copyright_links">
                    关于我们  |  联系我们  |  联系客服  |  商家入驻  |  营销中心  |  友情链接  |  销售联盟  |  English Site  |  Contact U
                </p>
                <p class="copyright_info">
                    地址：西安市雁塔区旺座SOHO 邮编：721000 电话：400-666-8888 传真：029-86868686 邮箱: zsf@163.com  <br>
                    陕ICP备06980110号陕公网安备61030216812
                </p>
        </div>

    </div>
    <!-- 脚部区域 -- end -->

    <ul class="menu">
        <li class="active">美丽人生</li>
        <li>居家生活</li>
        <li>时尚服装</li>
        <li>科技生活</li>
    </ul>

    <script src="./js/index.js"></script> 
</body>
</html>